<template>
	<div class="goods-list">
	<!-- <router-link class="goods-item" v-for="(item,i) in goodslist" :key="i" :to="'/home/goodsinfo/'+item.id">
	</router-link> -->

		<!-- 在网页中，有两种跳转方式 -->
		<!-- 方式一：使用a标签的形式叫做标签跳转 -->
		<!-- 方式二：使用window.loaction.href的形式叫做编程式导航 -->

		<div class="goods-item" v-for="(item,i) in goodslist" :key="i" @click="goDetail(item.id)">
			<img :src="item.img_url" alt="">
			<h1 class="title">{{item.title}}</h1>
			<div class="info">
				<p class="price">
					<span class="now">￥{{item.sell_price}}</span>
					<span class="old">￥{{item.market_price}}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩{{item.stock_quantity}}件</span>
				</p>
			</div>
		</div>
		
		<mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pageindex:1	,//分页的页数
				goodslist:[]	//存放商品列表的数组
			};
		},
		created(){
			this.getGoodsList()
		},
		methods: {
			getGoodsList() {
				this.$http.get('http://www.liulongbin.top:3005/api/getgoods?pageindex='+this.pageindex).then(result =>{
					if(result.body.status === 0){
						this.goodslist = this.goodslist.concat(result.body.message)
					}
				})
			},
			getMore(){
				this.pageindex++;
				this.getGoodsList()
			},
			goDetail(id){	//使用js形式进行路由导航
				// this.$route和$this.$router
				// this.$route是路由参数对象，所有路由中的参数，params query都属于他
				// this.$router是一个路由导航对象，用它可以方便的使用代码实现路由的前进后退，跳转到新的url地址
				// 1.最简单的this.$router.push('/home/goodsinfo/'+id)
				// this.$router.push('/home/goodsinfo/'+id)
				
				// 2.传递对象this.$router.push({path:'/home/goodsinfo/'+id})
				// this.$router.push({path:'/home/goodsinfo/'+id})
				
				// 3.传递命名的路由
				this.$router.push({name:'goodsinfo',params:{id}})
			}
		},
	}
</script>

<style lang="less" scoped>
.goods-list{
	display: flex;
	flex-wrap: wrap;
	padding: 8px;
	justify-content: space-between;
	
	.goods-item{
		width:49%;
		border:1px solid #ccc;
		box-shadow:0 0 8px #ccc;
		margin:3px 0px;
		padding: 2px;
		display:flex;
		flex-direction:column;
		justify-content:space-between;
		min-height:293px;
		
		img{
			width: 100%;
		}
		
		.title{
			font-size: 14px;
		}
		
		.info{
			background-color: #eee;
			p{
				margin: 0;
				padding: 5px;
			}
			.price{
				.now{
					color: red;
					font-weight: bold;
					font-size: 16px;
				}
				.old{
					text-decoration: line-through;
					font-size: 12px;
					margin-left: 10px;
				}
			}
			.sell{
				display: flex;
				justify-content: space-between;
			}
		}
	}
}
</style>
